import React, { FC, useRef, useState, memo } from 'react';
import Components from './Components';
import FormContainer from './FormContainer';
import Setting from './Setting';
import styles from './index.less';
import { Row, Col } from 'antd';

interface IFormRender {

}
const FormRender: FC<IFormRender> = (props) => {
    const {} = props;
    const currentDraggableRef = useRef<{currentDraggable: string}>({ currentDraggable: '' });
    const [settingVisible, setSettingVisible] = useState<boolean>(false)
    
    //展示属性配置窗口
    const changeSettingVisible = (visible: boolean) => {
        setSettingVisible(visible);
    };
    console.log(settingVisible, "settingVisible")
    return (
        <div className={styles["form_render"]}>
            <Row justify={"center"} style={{width: '100%'}}>
                <Col span={settingVisible ? 6 : 8}>
                    <Components currentDraggableRef={currentDraggableRef}/>
                </Col>
                <Col span={settingVisible ? 10 : 16}>
                    <FormContainer changeSettingVisible={changeSettingVisible} currentDraggableRef={currentDraggableRef} settingVisible={settingVisible}/>
                </Col>
                {
                    settingVisible && (
                        <Col span={8}>
                            <Setting settingVisible={settingVisible} data={currentDraggableRef} changeSettingVisible={changeSettingVisible}/>
                        </Col>
                    )
                }
            </Row>
        </div>
    )
};

export default memo(FormRender, (pre, cur) => {
    if(JSON.stringify(pre) === JSON.stringify(cur)) {
        return true;
    }
    return false;
});